import Vue from "vue";
import goods from "./CardAnimation.vue";

const Animation = Vue.extend(goods);

/**
 * 创建商品进入购物车动画组件
 * @param {*} startX 开始X轴位置
 * @param {*} startY 开始Y轴位置
 * @param {*} endX 结束X轴位置
 * @param {*} endY 结束Y轴位置
 * @param {*} src 图片src地址
 * @param {*} width 图片宽度
 * @param {*} height 图片高度
 */
export default function ({ startX, startY, endX, endY, src, width, height }) {
  const app = new Animation({
    el: document.createElement("div"),
    data() {
      return {
        width,
        height,
        src,
        moveX: startX, //当前位置
        moveY: startY, //当前位置
        //缩放
        sY: 1,
        sX: 1,
        //隐形
        opacity: 1,
        //是否显示
        show: true,
      };
    },
  });
  document.body.appendChild(app.$el);
  //改变图片位置开始进入购物车
  setTimeout(() => {
    app.moveX = endX;
    app.moveY = endY;
    app.sX = 0.1;
    app.sY = 0.1;
    app.opacity = 0;
  }, 0);
  //按照指定时间到位置后
  setTimeout(() => {
    app.show = false;
  }, 1100);
}
